<template>
  <div id="data-view">
  <dv-full-screen-container>
    <dv-loading v-show="loading">Loading...</dv-loading>
    <el-row
        style="color:#fff;margin-bottom:32px;text-align: center;line-height: 80px;font-size: 32px; font-weight: bold;">
      试验平台
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="8">
        <dv-border-box-12>
          <div class="dashboard-border-radius">
            <dashboardSpeed backgroundColor=""/>
          </div>

        </dv-border-box-12>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <dv-border-box-12>
          <div class="dashboard-border-radius">
            <!--          <histogram />-->
            <dynamic-bar-chart backgroundColor=""/>
          </div>
        </dv-border-box-12>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <dv-border-box-12>
          <div class="dashboard-border-radius">
            <!--          <circular-diagram />-->
            <basic-nightingale-rose backgroundColor=""/>
          </div>
        </dv-border-box-12>
      </el-col>
    </el-row>
    <el-row :gutter="32" style="margin-top: 10px;">
      <el-col :xs="24" :sm="24" :lg="8">
        <dv-border-box-11 title="试验运行情况">
          <div style="height: 500px;padding: 80px 20px 0 20px;">
              <el-row :gutter="32">
                <el-col :xs="24" :sm="24" :lg="8">
                  <div class="dashboard-border-radius" style="padding: 10px">
                    <dv-border-box-12>
                      <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="12">
                          <div class="center_chart_text">
                            计划运行炉段:
                          </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="12">
                          <CenterChart
                              :id="rate[0].id"
                              :tips="rate[0].tips"
                              :colorObj="rate[0].colorData"
                          />
                        </el-col>
                      </el-row>
                    </dv-border-box-12>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <div class="dashboard-border-radius">
                    <dv-border-box-12>
                      <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="12">
                          <div class="center_chart_text">
                          已执行炉段:
                          </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="12">
                          <CenterChart
                              :id="rate[1].id"
                              :tips="rate[1].tips"
                              :colorObj="rate[1].colorData"
                          />
                        </el-col>
                      </el-row>
                    </dv-border-box-12>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="8">
                  <div class="dashboard-border-radius">
                    <dv-border-box-12>
                      <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="12">
                          <div class="center_chart_text">
                            剩余执行炉段:
                          </div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :lg="12">
                          <CenterChart
                              :id="rate[2].id"
                              :tips="rate[2].tips"
                              :colorObj="rate[2].colorData"
                          />
                        </el-col>
                      </el-row>
                    </dv-border-box-12>
                  </div>
                </el-col>
              </el-row>
            <el-row>
              <el-row>
                <div style="height: 40px;text-align: center;line-height: 40px; color: white;font-weight: bold; ">
                  <span>试验指标</span>
                </div>
              </el-row>
              <el-row>
                <el-form ref="loginForm" label-width="100px">
                  <el-form-item prop="name1">
                    <span slot="label">
                     <span style="color: white"><strong>试验目标湿度</strong>      </span>
                   </span>
                    <el-input v-model="loginForm.name1"></el-input>
                  </el-form-item>
                  <el-form-item  prop="name2">
                      <span slot="label">
                       <span style="color: white"><strong>试验目标注量</strong>      </span>
                     </span>
                    <el-input v-model="loginForm.name2"></el-input>
                  </el-form-item>
                  <el-form-item prop="name3">
                    <span slot="label">
                     <span style="color: white"><strong>试验目标消耗</strong>      </span>
                   </span>
                    <el-input v-model="loginForm.name3"></el-input>
                  </el-form-item>
                </el-form>
              </el-row>
            </el-row>
          </div>
        </dv-border-box-11>


      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <dv-border-box-12>
          <div class="dashboard-border-radius">
            <funnel3d-chart></funnel3d-chart>
          </div>
        </dv-border-box-12>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-row>
          <dv-border-box-12>
            <el-table
                :data="tableData"
                style="width: 100%;margin: 0 auto; padding:0;" :cell-style="{'color':'#FFFFFF','text-align':'center'}"
                :header-cell-style="{'background':'#375A88','color':'rgba(2,217,253,0.8)','text-align':'center'}"
                :row-class-name="tableRowClassName">
              <el-table-column
                  prop="name"
                  label="姓名">
              </el-table-column>
              <el-table-column
                  prop="age"
                  label="年龄">
              </el-table-column>
              <el-table-column
                  prop="date"
                  label="日期">
              </el-table-column>
            </el-table>
          </dv-border-box-12>
        </el-row>
      </el-col>
    </el-row>
  </dv-full-screen-container>
  </div>
</template>
<style>
.el-table .warning-row {
  background: #0c385e !important;
}

.el-table .success-row {
  background: #062340 !important;
}

.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: none !important;
}
</style>
<script>
import drawMixin from "../utils/drawMixin";
import {formatTime} from "../utils";
import CircularChart from "../components/dashboard/CircularChart";
import DynamicBarChart from "../components/dashboard/DynamicBarChart";
import DashboardSpeed from '../components/dashboard/DashboardSpeed'
import Funnel3dChart from '../components/dashboard/Funnel3dChart'
import BasicNightingaleRose from '../components/dashboard/BasicNightingaleRose'
import CenterChart from '../components/echart/center/centerChartRate'
export default {
  mixins: [drawMixin],
  name: 'Index',
  components: {
    DashboardSpeed,
    DynamicBarChart,
    Funnel3dChart,
    BasicNightingaleRose,
    CenterChart
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王虎',
          age: '16'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          age: '18'
        }, {
          date: '2016-05-04',
          name: '王大虎',
          age: '21'
        }, {
          date: '2016-05-01',
          name: '王二虎',
          age: '30'
        }, {
          date: '2016-05-08',
          name: '张小虎',
          age: '15'
        }, {
          date: '2016-05-06',
          name: '李小虎',
          age: '33'
        }, {
          date: '2016-05-07',
          name: '李虎',
          age: '50'
        }
      ],
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],
      rate: [
        {
          id: 'centerRate1',
          tips: 60,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 40,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        },
        {
          id: 'centerRate4',
          tips: 70,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ],
      loginForm:{
        name1:'',
        name2:'',
        name3:''
      }
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      }
      return 'success-row';
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
  },
  mounted() {
    this.timeFn()
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing)
  }
}
</script>

<style lang="scss" scoped>
#data-view {
  width: 100vw;
  height: 100vh;
}

.title-text {
  font-size: 24px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
.center_chart_text{
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding-left: 10px;
  width: 150px;
}
.el-form-item__label{
  font-weight: bold;
  color: white;
}
</style>
